<template>
  <div class="chart">
    <div class="card-search">
      <el-form
        size="small"
        :inline="true"
        :model="formInline"
        class="demo-form-inline"
      >
        <el-form-item label="时间">
          <el-date-picker
            v-model="formInline.timeLine"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            format="yyyy-MM-dd HH:mm:00"
            value-format="yyyy-MM-dd HH:mm:00"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="">
          <el-button icon="el-icon-search" type="primary" @click="getAllDataNew"
            >查询</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <div class="card-table">
      <el-table
        :header-cell-style="getRowClass"
        :data="tableData"
        style="width: 100%;"
      >
        <el-table-column label="序号" width="width" type="index" align="center">
        </el-table-column>
        <el-table-column align="center" label="晾料结束" width="width">
          <template slot-scope="{ row }">
            {{ row.endTime }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="混捏结束" width="width">
          <template slot-scope="{ row }">
            {{ row.startTime }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="混捏结束温度" width="width">
          <template slot-scope="{ row }">
            {{ Number(row.MaxMap.混捏结束温度.value).toFixed(1) }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="晾料开始温度" width="width">
          <template slot-scope="{ row }">
            {{ Number(row.MaxMap.晾料中.value).toFixed(1) }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="晾料结束温度" width="width">
          <template slot-scope="{ row }">
            {{ Number(row.MaxMap.晾料后.value).toFixed(1) }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="晾料时长" width="width">
          <template slot-scope="{ row }">
            {{
              `${
                (Number(Date.parse(row.endTime)) -
                  Number(Date.parse(row.startTime))) /
                1000 /
                60
              }分钟`
            }}
          </template>
        </el-table-column>
        <!-- <el-table-column align="center" label="操作" width="width">
          <template slot-scope="{ row }">
            <el-button type="text" @click="showEcharts(row)">详情</el-button>
          </template>
        </el-table-column> -->
      </el-table>

      <!-- 分页 -->
      <div class="pagin" v-if="total >= pageSize">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currPage"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import { getReportDataNew } from "@/api/calcination/index.js";
export default {
  data() {
    return {
      total: "",
      pageSize: 10,
      currPage: 1,
      dialogVisible: false,
      formInline: {
        timeLine: null,
      },
      tableData: [],
      myChart: "",
    };
  },
  created() {
    this.getAllDataNew();
  },
  updated() {},
  mounted() {},
  methods: {
    async getAllDataNew() {
      if (this.formInline.timeLine === null)
        this.formInline.timeLine = ["", ""];
      const params = {
        pageSize: this.pageSize,
        currPage: this.currPage,
        startTime: this.formInline.timeLine[0],
        endTime: this.formInline.timeLine[1],
        interval: 0,
      };
      console.log(params);
      let {
        data: { data },
      } = await getReportDataNew(params);
      this.tableData = data.data;
      this.total = data.count;
    },
    handleClose() {
      this.disposeEcharts();
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.getAllDataNew();
    },
    handleCurrentChange(val) {
      this.currPage = val;
      this.getAllDataNew();
    },
  },
};
</script>


